import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Separator } from '../../components/ui/separator';

const meta: Meta<typeof Separator> = {
  title: 'UI/Separator',
  component: Separator,
  tags: ['autodocs'],
  argTypes: {
    orientation: {
      control: 'radio',
      options: ['horizontal', 'vertical'],
      description: '分隔线方向',
    },
    className: {
      control: 'text',
      description: '自定义样式类',
    },
  },
};

export default meta;
type Story = StoryObj<typeof Separator>;

export const Horizontal: Story = {
  args: {
    orientation: 'horizontal',
  },
  render: (args) => (
    <div className="w-full max-w-md">
      <div className="text-lg font-medium">标题</div>
      <div className="text-sm text-gray-500 mb-2">这是一个水平分隔线示例</div>
      <Separator {...args} />
      <div className="mt-2">
        <p>下方内容</p>
      </div>
    </div>
  ),
};

export const Vertical: Story = {
  args: {
    orientation: 'vertical',
  },
  render: (args) => (
    <div className="flex h-20 items-center">
      <div>左侧内容</div>
      <Separator {...args} className="mx-4 h-10" />
      <div>右侧内容</div>
    </div>
  ),
};

export const CustomStyle: Story = {
  render: () => (
    <div className="w-full max-w-md space-y-4">
      <div>
        <div className="text-lg font-medium mb-2">默认样式</div>
        <Separator />
      </div>
      
      <div>
        <div className="text-lg font-medium mb-2">自定义颜色</div>
        <Separator className="bg-blue-500" />
      </div>
      
      <div>
        <div className="text-lg font-medium mb-2">自定义厚度</div>
        <Separator className="h-[2px]" />
      </div>
      
      <div>
        <div className="text-lg font-medium mb-2">虚线样式</div>
        <Separator className="border-dashed border-t border-gray-300 bg-transparent h-0" />
      </div>
      
      <div>
        <div className="text-lg font-medium mb-2">渐变样式</div>
        <Separator className="h-[2px] bg-gradient-to-r from-blue-500 to-purple-500" />
      </div>
    </div>
  ),
};

export const WithContent: Story = {
  render: () => (
    <div className="w-full max-w-md py-4">
      <div className="relative flex items-center">
        <Separator className="absolute w-full" />
        <span className="relative bg-white px-2 text-sm text-gray-500 mx-auto">
          或者使用其他方式登录
        </span>
      </div>
    </div>
  ),
};
